<template>
  <!-- 账目管理 -->
  <div class="head">
    <div class="Piao_Fei">
      <el-button class="Piao_Btn" size="medium" type="primary" @click="Newly">新增</el-button>
    </div>
    <div class="head_bg">
      <!--  -->
      <div class="head_xk">
        <div class="head_bt">{{Receive.a}}</div>
        <div class="head_sz">{{Receive.a1}}</div>
      </div>
      <!--  -->
      <div class="head_xkb">
        <div class="head_bt">{{Receive.b}}</div>
        <div class="head_sz">{{Receive.b1}}</div>
      </div>
      <!--  -->
      <div class="head_xka">
        <div class="head_bt">{{Receive.c}}</div>
        <div class="head_sz">{{Receive.c1}}</div>
      </div>
      <!--  -->
      <div class="head_xkc">
        <div class="head_bt">{{Receive.d}}</div>
        <div class="head_sz">{{Receive.d1}}</div>
      </div>
      <div class="head_xkf">
        <div class="head_bt">{{Receive.e}}</div>
        <div class="head_sz">{{Receive.e1}}</div>
      </div>
      <div class="head_xkg">
        <div class="head_bt">{{Receive.f}}</div>
        <div class="head_sz">{{Receive.f1}}</div>
      </div>
      <!--  -->
      <div id="bord_from"></div>
    </div>
    <div class="head_bg_tow">
      <el-table
        :data="tableData"
        style="width: 100%;background-color:#fff"
        :max-height="700"
        stripe
      >
        <el-table-column prop="Type" label="收支类型" align="center" width="80"></el-table-column>
        <el-table-column prop="CreateOn" label="日期" align="center"></el-table-column>
        <el-table-column prop="ToWho" label="对象" align="center"></el-table-column>
        <el-table-column prop="Reasons" label="事由" align="center"></el-table-column>
        <el-table-column prop="Price" label="金额(元)" align="center">
          <template slot-scope="scope">{{scope.row.Price}}元</template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <el-button @click="Details(scope.row)" slot-scope="scope" type="primary" size="small">详情</el-button>
        </el-table-column>
      </el-table>
      <div class="bottom_three">
        <el-pagination
          background
          layout="prev, pager, next"
          :current-page.sync="current"
          :page-size="pagesize"
          @current-change="handleCurrentChange"
          :total="total"
        ></el-pagination>
      </div>
    </div>
    <!-- ========================================= -->
    <!-- ======== 新增 ========= -->
    <!-- ========================================= -->
    <el-dialog :visible.sync="dialogTableVisible" :modal-append-to-body="false" width="1100px">
      <div class="herd_bud"></div>
      <div class="from_bt">新增</div>
      <br />
      <p class="Purchase_Division"></p>
      <br />
      <el-form :model="formInline" :inline="true" label-width="120px">
        <el-form-item label="收支类型">
          <el-select v-model="TypeVal" placeholder="收支类型" @change="change">
            <el-option label="支出" value="2"></el-option>
            <el-option label="收入" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="对象">
          <el-input v-model="formInline.ToWho"></el-input>
        </el-form-item>
        <el-form-item label="金额">
          <el-input v-model="formInline.Price"></el-input>元
        </el-form-item>
      </el-form>
      <el-form :inline="true" label-width="120px">
        <el-form-item label="事由">
          <el-input
            :autosize="{ minRows: 4, maxRows: 4}"
            type="textarea"
            placeholder="事由内容"
            v-model="formInline.Reasons"
            style="width: 900px;"
          ></el-input>
        </el-form-item>
      </el-form>
      <div class="up_phto">
        上传凭证
        <el-upload
          :file-list="imgList"
          action="/apis/ComApi.asmx/UpImg"
          list-type="picture-card"
          :on-remove="function(res,file){ return handleRemove(res,file)}"
          :on-success="function (res, file) { return handleSuccess(res, file)}"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt />
        </el-dialog>
      </div>
      <div class="Mwei_Btn">
        <el-button size="medium" type="primary" @click="add">确认</el-button>
        <el-button size="medium" type="info" @click="dialogTableVisible = false">取消</el-button>
      </div>
    </el-dialog>
    <!-- ========================================= -->
    <!-- ======== 详情 ========= -->
    <!-- ========================================= -->
    <el-dialog :visible.sync="dialogTableVisibleBy" :modal-append-to-body="false" width="1100px">
      <div class="herd_bud"></div>
      <div class="from_bt">收支详情</div>
      <br />
      <p class="Purchase_Division"></p>
      <br />
      <el-form :model="forminput" :inline="true" label-width="120px">
        <el-form-item label="收支类型">
          <el-input v-model="forminput.Type" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="对象">
          <el-input v-model="forminput.ToWho" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="金额">
          <el-input v-model="forminput.Price" :disabled="true"></el-input>
        </el-form-item>
      </el-form>
      <el-form :model="forminput" :inline="true" label-width="120px">
        <el-form-item label="事由">
          <el-input
            :disabled="true"
            :autosize="{ minRows: 4, maxRows: 4}"
            type="textarea"
            placeholder="事由内容"
            v-model="forminput.Reasons"
            style="width: 900px;"
          ></el-input>
        </el-form-item>
      </el-form>
      <div class="up_phto" v-if="srcList.length>0">
        凭证
        <el-image
          style="width: 100px; height: 100px; margin:10px;"
          :src="k"
          v-for="k in srcList"
          :key="k"
          :preview-src-list="srcList"
        ></el-image>
      </div>
      <div class="Mwei_Btn">
        <!-- <el-button size="medium" type="primary" @click="dialogTableVisibleBy = false">确认</el-button> -->
        <el-button size="medium" type="info" @click="dialogTableVisibleBy = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import daohanganniu from "../../components/daoHangAnNiu.vue";
import axios from "axios";
export default {
  components: {
    daohangNav: daohanganniu
  },
  data () {
    return {
      total: 1,
      current: 1,
      pagesize: 10,
      //数据字段
      Receive: {
        a: "本年收入(元)",
        a1: "0.00",
        //2
        b: "本年支出(元)",
        b1: "0.00",
        //3
        c: "本月收入(元)",
        c1: "0.00",
        //4
        d: "本月支出(元)",
        d1: "0.00",
        //5
        e: "本月应收(元)",
        e1: "0.00",
        //
        f: "本月应支(元)",
        f1: "0.00"
      },

      //表单
      tableData: [],
      dialogVisible: false,
      dialogTableVisible: false,
      dialogTableVisibleBy: false,
      //图片上传
      imgList: [],
      dialogImageUrl: "",
      //文本输入
      TypeVal: "支出",
      forminput: {
        Type: "", ToWho: "", Price: "", Reasons: ""
      },
      srcList: [],
      formInline: {
        Type: 2, ToWho: "", Price: "", Reasons: ""
      },
      Mark: 0,
      creater: 0,
      outlis: [],
      inlis: [],
    };
  },
  created () {
    this.getLis();
    this.creater = JSON.parse(localStorage.getItem("message")).Id;
    this.getData(0);
  },
  mounted () {
    setTimeout(() => {
      this.drawLine();
    }, 500);
  },
  methods: {
    //统计
    getLis () {
      let obj = {};
      var objs = JSON.stringify(obj);
      let the = { index: 3, jsondata: objs }
      axios.post("/apis/FinanceManage.asmx/GetData", the).then(({ data }) => {
        var list = JSON.parse(data.d);
        this.Receive.a1 = list.yearin; this.Receive.b1 = list.yearout; this.Receive.c1 = list.monthin; this.Receive.d1 = list.monthout;
        this.inlis = list.inlis; this.outlis = list.outlis;
      });
    },
    // 首页列表数据
    getData (page) {
      let obj = {
        pn: page,
        PerPageSize: this.pagesize
      };
      var objs = JSON.stringify(obj);
      let the = { index: 2, jsondata: objs }
      axios.post("/apis/FinanceManage.asmx/GetData", the).then(({ data }) => {
        var list = eval('(' + data.d + ')');
        this.total = list.count;
        this.tableData = list.data;
      });
    },

    change (e) { this.formInline.Type = e; },
    add () {
      if (this.Mark == 0) {
        if (this.formInline.ToWho == "") { this.$message.error("对象非空"); return }
        if (this.formInline.Price == "") { this.$message.error("金额非空"); return }
        if (this.formInline.Reasons == "") { this.$message.error("事由非空"); return }
        if (this.imgList.length == "" || this.imgList.length == 0) { this.$message.error("请上传凭证"); return }
        let imgList = "";
        if (this.imgList.length > 0) { for (var i = 0; i < this.imgList.length; i++) { imgList += this.imgList[i].url + "@"; } }
        var data = { Type: this.formInline.Type, ToWho: this.formInline.ToWho, Price: this.formInline.Price, Reasons: this.formInline.Reasons, ImgList: imgList, Creater: this.creater }
        var objs = JSON.stringify(data); let the = { index: 1, jsondata: objs };
        console.log(objs);
        this.Mark = 1;
        axios.post("/apis/FinanceManage.asmx/Add", the).then(({ data }) => {
          var list = JSON.parse(data.d);
          if (list.flag == true) {
            this.$message.success(list.tip);
            this.dialogTableVisible = false;
            this.getData(this.current - 1);
          }
          else { this.$message.error(list.tip); }
        });
      }
    },
    //分页
    handleCurrentChange (e) {
      this.getData(e - 1);
    },
    // 饼状图
    drawLine () {
      let inlis = this.inlis; let outlis = this.outlis;
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("bord_from"));
      // 绘制图表
      var xData = (function () {
        var data = [];
        for (var i = 1; i < 13; i++) {
          data.push(i + "月");
        }
        return data;
      })();
      myChart.setOption({
        backgroundColor: "#fff",
        title: {
          text: "",
          x: "1%",

          textStyle: {
            color: "#fff",
            fontSize: "22"
          },
          subtextStyle: {
            color: "#909399",
            fontSize: "14",
            fontWeight: "bold"
          }
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
            textStyle: {
              color: "#fff"
            }
          }
        },
        grid: {
          borderWidth: 0,
          top: 80,
          bottom: 30,
          textStyle: {
            color: "#fff"
          }
        },
        legend: {
          x: "60%",
          top: "8%",
          textStyle: {
            color: "#90979c"
          },
          data: ["支出", "收入"]
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            axisLine: {
              lineStyle: {
                color: "#90979c"
              }
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitArea: {
              show: false
            },
            axisLabel: {
              interval: 0
            },
            data: xData
          }
        ],
        yAxis: [
          {
            type: "value",

            splitLine: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: "#90979c"
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            splitArea: {
              show: false
            }
          }
        ],
        series: [
          {
            name: "支出",
            type: "bar",
            stack: "总量",
            barMaxWidth: 35,
            barGap: "10%",
            itemStyle: {
              normal: {
                color: "#409EFF"
              }
            },
            data: outlis
          },
          {
            name: "收入",
            type: "bar",
            stack: "总量",
            itemStyle: {
              normal: {
                color: "#ebb563",
                barBorderRadius: 0
              }
            },
            data: inlis
          }
        ]
      });
    },
    //新增
    Newly () {
      this.dialogTableVisible = true;
    },
    Details (item) {
      this.dialogTableVisibleBy = true;
      this.srcList = [];
      this.forminput = item;
      if (item.ImgList != null || item.ImgList != "") {
        var imgs = item.ImgList.split('@');
        for (var i = 0; i < imgs.length; i++) { if (imgs[i] != "") { this.srcList.push(imgs[i]); } }
      }
    },
    //上传------图片
    S4 () { return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1); },
    guid () { return this.S4() + this.S4() + this.S4() + this.S4(); },
    handleRemove (res, file) {
      let filelist = this.imgList;
      for (let ind = 0; ind < filelist.length; ind++) {
        const element = filelist[ind];
        if (element.uid == res.uid) { filelist.splice(ind, 1); }
      }
      this.imgList = filelist;
    },
    handleSuccess (response, file) {
      var datas = this.$x2js.xml2js(response);
      var url = "" + datas.UpFileReturn.fullurl;
      this.imgList.push({
        status: "success", uid: file.uid, src: url, url: url
      });
    },
  }
};
</script>

<style lang="scss" scoped>
@import '@/assets/scss/base.scss';
.head_bg {
  float: left;
  width: 35%;
  height: 750px;
  background-color: white;
}
.head_bg_tow {
  height: 180%;
  margin-left: 36%;
  width: 63%;
}
.bottom_three {
  height: 60px;
  line-height: 40px;
  text-align: center;
}
.head_xk {
  float: left;
  height: 150px;
  width: 50%;
  border: 1px solid $linecolor;
  text-align: center;
  border-radius: 2px;
}
.head_xka {
  float: left;
  height: 150px;
  width: 50%;
  border: 1px solid $linecolor;
  text-align: center;
  border-radius: 2px;
}
.head_xkc {
  float: right;
  height: 150px;
  width: 50%;
  margin-right: -2px;
  margin-top: -152px;
  border: 1px solid $linecolor;
  text-align: center;
  border-radius: 2px;
}
.head_xkb {
  margin-left: 50%;
  height: 150px;
  width: 50%;
  border: 1px solid $linecolor;
  text-align: center;
  border-radius: 2px;
}
.head_xkf {
  float: left;
  height: 150px;
  width: 50%;
  border: 1px solid $linecolor;
  text-align: center;
  border-radius: 2px;
}
.head_xkg {
  float: right;
  height: 150px;
  width: 49.5%;
  margin-top: -152px;
  border: 1px solid $linecolor;
  text-align: center;
  border-radius: 2px;
}
.head_bt {
  margin-top: 30px;
}
.head_sz {
  margin-top: 15px;
  font-weight: bold;
}
#bord_from {
  float: left;
  border: 1px solid $linecolor;
  width: 99.6%;
  height: 295px;
}
//新增按钮
.Piao_Fei {
  position: absolute;
  margin-left: 80%;
  margin-top: -100px;
}
.Piao_Btn {
  height: 60px;
  width: 140px;
  font-size: 16px;
}
//弹窗
.herd_bud {
  margin-top: -40px;
  height: 20px;
  width: 5px;
  background-color: rgb(112, 18, 235);
}
.from_bt {
  margin-top: -20px;
  margin-left: 10px;
  font-size: $font-size-medium-x;
}
.up_phto {
  margin-top: 20px;
  text-align: center;
}
.Mwei_Btn {
  margin-top: 20px;
  text-align: center;
}
</style>